<template>
    <div>
        <!-- 按钮 -->
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>

        <!-- 图标 -->
        <span class="el-icon-lock"></span>
        <i class="el-icon-delete" style="color: red; font-size: 20px;"></i>
        <hr>


        <!-- 布局 -->
        <el-row :gutter="30">
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>

        <!-- 日期选择器 -->
        <el-date-picker v-model="birthday" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" :editable="false"
            size="small">
        </el-date-picker>

        <!-- 文件上传 -->
        <el-upload 
            action="https://jsonplaceholder.typicode.com/posts/" 
            list-type="picture-card"
            :on-preview="handlePictureCardPreview" 
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>


    </div>
</template>

<script>
export default {
    data() {
        return {
            birthday: '',
            dialogImageUrl: '',
            dialogVisible: false
        }
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
}
</script>

<style lang="less" scoped>
.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}</style>